import './css/index.scss'


//设置html图片
document.getElementsByClassName('panel7').item(0).getElementsByClassName('logo').item(0).setAttribute('src', require('./img/node-logo.svg'))

function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}

/**
 * dialog模态框
 */
function openDialog(dom) {
    var node = document.getElementById('dialogcenter');
    while (node.childNodes.length > 0) {
        node.childNodes.item(0).remove()
    }
    node.appendChild(dom)
    document.getElementById('dialog').style.display = 'block'
}
document.getElementById('dialogbg').onclick = () => {
    document.getElementById('dialog').style.display = 'none'
}

/**
 * demo展示
 */
document.querySelector('button[data=demo-scss]').onclick = function () {
    let box = document.createElement('div')

    let show = document.createElement('img');
    show.src = require('./img/scss-demo.png');
    show.style.maxWidth = '50%';
    show.style.maxHeight = '100%';

    let show2 = document.createElement('img');
    show2.src = require('./img/css-demo.png');
    show2.style.maxWidth = '50%';
    show2.style.maxHeight = '100%';

    box.style.width = '100%';
    box.style.height = '100%';
    box.style.display = 'flex';
    box.style.flexDirection = 'row';
    box.style.justifyContent = 'space-around';
    box.appendChild(show);
    box.appendChild(show2);
    openDialog(box);
}

document.querySelector('button[data=demo-ts]').onclick = function () {
    let box = document.createElement('div')

    let show = document.createElement('img');
    show.src = require('./img/ts-demo.svg');
    show.style.maxWidth = '50%';
    show.style.maxHeight = '100%';

    box.style.width = '100%';
    box.style.height = '100%';
    box.style.textAlign = 'center';
    box.appendChild(show);
    openDialog(box);
}


/**
 * 页面滚动高度控制部分
 */
let location = 0;

let lock = true;

let max = document.getElementsByClassName('panel').length

function scTop() {
    let app = document.getElementById('app')
    if (location < 0)
        location += 100
    app.style.transform = `translateY(${location}vh)`
}

function scBottom() {
    let app = document.getElementById('app')
    if (location > -100 * (max - 1))
        location -= 100
    app.style.transform = `translateY(${location}vh)`
}

var scrollFunc = function (e) {
    e = e || window.event;
    if (!lock) {
        lock = true;
        if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
            if (e.wheelDelta > 0) { //当滑轮向上滚动时
                scTop()
            }
            if (e.wheelDelta < 0) { //当滑轮向下滚动时
                scBottom()
            }
        } else if (e.detail) { //Firefox滑轮事件
            if (e.detail > 0) { //当滑轮向上滚动时
                scTop()
            }
            if (e.detail < 0) { //当滑轮向下滚动时
                scBottom()
            }
        }
        setTimeout(() => {
            lock = false
        }, 800)
    }
};

if (getQueryString('talk') != null) {
    lock = false
    document.body.style.height = '100vh'
    document.body.style.overflow = 'hidden'

    let panel2 = document.getElementsByClassName('panel')[1].childNodes[0]
    panel2.childNodes[0].innerText = "关于我"
    panel2.childNodes[1].style.display = 'none'
    panel2.childNodes[2].style.display = 'block'

    window.onmousewheel = document.onmousewheel = scrollFunc

    document.querySelector('#app>.panel3>.main>.continue').style.color = "rgba(255,255,255,0)"
    document.getElementsByClassName('panel3')[0].childNodes.item(0).onclick = function () {
        document.querySelector('#app>.panel3>.main>.continue').style.color = "rgba(255,255,255,1)"
    }
}